import { useState ,useEffect} from "react";
import axios from "axios";
import './shopcar.scss'

export default function Shopcar() {
    const [shopList, setshopList] = useState([]);
    const [selectAll, setselectAll] = useState(false);
    
useEffect(() => {
    axios({
        post:"get",
        url:'https://apipc-xiaotuxian-front.itheima.net/member/cart',
        headers:{
            Authorization : `Bearer ${JSON.parse(localStorage.getItem('token')).token}`
        },
    }).then(res=>{
        setshopList(res.data.result)
    })
}, []);
function changeCount() {}
function checkAll() {}
function changeOne(A) {

    axios({
        method:"PUT",
        url:`https://apipc-xiaotuxian-front.itheima.net/member/cart/${A.skuId}`,
        headers:{
            Authorization : `Bearer ${JSON.parse(localStorage.getItem('token')).token}`
        },
        data:{
            selected:A.selected
        }
    }).then(res=>{
        // this.getCart()
        console.log(res);
    })
}
function shopCarnum(){
    var num = 0
    shopList.forEach(i => {
        if(i.isEffective==true){
            num+=i.count
        }
    });
    return num
}
function shopCarPrice(){
    var price = 0
    shopList.forEach(i => {
        if(i.isEffective==true){
            price+=i.count*i.price
        }
    });
    return price.toFixed(2)
}
    return(
        <div id="shopcar">
        {/* <Breadcrumb></Breadcrumb> */}
        <div className="cart">
        <table>
            <thead>
            <tr>
                <th width="120">
                <div className="xtx-checkbox">
                    <input type="checkbox" checked={selectAll} onChange={()=>{checkAll()}}/><span>全选</span>
                </div>
                </th>
                <th width="400">商品信息</th>
                <th width="220">单价</th>
                <th width="180">数量</th>
                <th width="180">小计</th>
                <th width="140">操作</th>
            </tr>
            </thead>
            <tbody>
                {
                  shopList.map((A,index)=>{
                      return(
                        <tr key={index}>
                            <td>
                            <div className="xtx-checkbox" >
                                <input type="checkbox" checked={A.selected} onChange={()=>{changeOne(A)}}/>
                            </div>
                            </td>
                            <td>
                            <div className="goods">
                                <span className=""><img
                                    src={A.picture}
                                    alt=""
                                /></span>
                                <div>
                                <p className="name ellipsis">{A.name}</p>
                                <div className="cart-sku">
                                    <div className="attrs">
                                    <span className="ellipsis">{A.attrsText}</span
                                    ><i className="iconfont icon-angle-down"></i>
                                    </div>
                                </div>
                                </div>
                            </div>
                            </td>
                            <td className="tc">
                            <p>¥{A.price}</p>
                            </td>
                            <td className="tc">
                            <div className="xtx-numbox">
                                <div className="numbox">
                                <span>-</span>
                                <input type="text" value={A.count} onChange={()=>{changeCount()}}/>
                                <span onClick={()=>{add(A)}}>+</span>
                                {/* <el-input-number size="small" v-model="A.count" onChange='numChange(A,A.skuId)'></el-input-number> */}
                                </div>
                            </div>
                            </td>
                            <td className="tc">
                            <p className="f16 red">¥{A.price*A.count}</p>
                            </td>
                            <td className="tc">
                            <p>
                                <span>移入收藏夹</span>
                            </p>
                            <p>
                                <span className="green" onClick={()=>{del(A)}}>删除</span>
                            </p>
                            <p>
                                <span>找相似</span>
                            </p>
                            </td>
                        </tr>
                      )
                  })  
                }
            </tbody>
        </table>
        </div>
        <div className="action">
        <div className="batch">
            <div className="xtx-checkbox" >
                <input type="checkbox" checked={selectAll} onChange={()=>{checkAll()}}/>
            <span >全选</span>
            </div>
            <span onClick={()=>{checkDel()}}>删除商品</span
            ><span>移入收藏夹</span
            ><span>清空失效商品</span>
        </div>
        <div className="total">
            共 {shopCarnum()} 件商品，已选择 {} 件，商品合计：
            <span className="red">¥{shopCarPrice()}</span
            ><button
            className="xtx-button ellipsis middle primary"
            data-v-1e3a5560=""
            
            >
            下单结算
            </button>
        </div>
        </div>
        {/* <Commodity></Commodity>
        <Alert :delete='del'></Alert> */}
    </div>
    )
}